<template>
    <div style="margin-top:50px">
        <van-cell-group inset>
              <van-field
                clearable
                style="background-color:#faf8f6;width: 95%; margin:0px 2.5%;"
                v-model="telephone"
                size="large"
                label-width="2.5em"
                label="+86"
                left-icon="user-o"
                placeholder="请输入手机号码"
                />
              <van-field
                v-model="message"
                center
                clearable
                style="background-color:#faf8f6;margin-top:20px;width: 95%; margin: 20px 2.5%;"
                left-icon="password-o"
                placeholder="请输入验证码"
              >
                <template #button>
                  <van-button 
                    size="small" 
                    style="background-color:#faf8f6; color:#ec7b67;border:none;"
                    @click="btn"
                    :text="txt"
                    >
                  </van-button>
                </template>
              </van-field>
            </van-cell-group>
            <div style="padding:0 5%">
                <router-link to="">
                    <van-button color="#ec7b67" size="large" style="font-weight:bold;">下一步</van-button>
                </router-link>
            </div>
    </div>
</template>
<script setup lang="ts">
    import {ref} from 'vue'

    let telephone = ref('')
    let message = ref('')

    //验证码倒计时
    let time = ref(60)
    let txt = ref('获取验证码')
    function btn(){
        txt.value = time.value + 's'
        let dsq = setTimeout(()=>{
            time.value--
            txt.value = time.value + 's'
        btn()
        },1000)
        if(time.value==0){
            txt.value = '再次获取'
            clearTimeout(dsq)
            time.value=60
        }
      
    }
</script>
<style scoped>
    
</style>